﻿<template>
  <div>
    <template v-if = "$store.state.currentTheme.indexOf('theme_dark') !== -1">
      <span> {{year}}-{{month}}-{{day}}</span>
      <span class="login_timeCenter">{{hours}}:{{mins}}:{{seconds}}</span>
    </template>
    <template v-else>
      <span> {{year}} 年 {{month}} 月 {{day}} 日</span>
      <span class="login_timeCenter">{{hours}}:{{mins}}:{{seconds}}</span>
      <span>星期{{week}}</span>
    </template>
  </div>
</template>

<script>
export default {
  data () {
    return {
      year: '',
      month: '',
      week: '',
      day: '',
      hours: '10',
      mins: '01',
      seconds: '00',
      timer: null
    }
  },
  created () {
    const current = new Date()
    this.year = current.getFullYear()
    this.month = this.checkCounts(current.getMonth() + 1)
    this.week = this.getWeek(current.getDay())
    this.day = this.checkCounts(current.getDate())
    this.timer = setInterval(() => {
      const nowTime = new Date()
      this.hours = this.checkCounts(nowTime.getHours())
      this.mins = this.checkCounts(nowTime.getMinutes())
      this.seconds = this.checkCounts(nowTime.getSeconds())
    }, 1000)
  },
  methods: {
    getWeek (myWeek) {
      switch (myWeek) {
        case 0:
          myWeek = '日'
          break
        case 1:
          myWeek = '一'
          break
        case 2:
          myWeek = '二'
          break
        case 3:
          myWeek = '三'
          break
        case 4:
          myWeek = '四'
          break
        case 5:
          myWeek = '五'
          break
        case 6:
          myWeek = '六'
          break
      }
      return myWeek
    },
    checkCounts (counts) {
      if (counts < 10) {
        return '0' + counts
      } else {
        return counts
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.login_timeCenter{
  margin:0 10px;
}
</style>
